import React, { useEffect, useRef, useState } from 'react';
import {
  get_getemployee_content_list,
  get_svg_captcha,
} from '../utils/api.tsx';
import { adduserlist, addpermission } from '../store/model/login.tsx';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import './login.scss';
import { Input } from 'antd';
import Button from '@material-ui/core/Button';
import Tell_yzm from '../Compon/Tell_yzm.tsx';
export default function Login() {
  const navgiate = useNavigate();
  const usedispatch = useDispatch();

  const get_getemployee_content_list_data = async () => {
    const data = await get_getemployee_content_list();
    usedispatch(adduserlist(data.data.userlist));
    usedispatch(addpermission(data.data.permission));
    navgiate('/home');
  };

  const [captcha, setcaptcha] = useState<any>(null);
  const get_svg_captcha_data = async () => {
    const data = await get_svg_captcha();
    // console.log(data.data);
    setcaptcha(data.data.data);
  };
  useEffect(() => {
    // get_getemployee_content_list_data();
    get_svg_captcha_data();
  }, []);
  const [tell, settell] = useState<number>();
  const [yzmcode, setyzmcode] = useState<string>('');
  const getyzmcode = (code) => {
    setyzmcode(code);
    console.log(yzmcode);
  };

  return (
    <div className="login_home">
      <div className="login_container">
        <div className="container" style={{ marginLeft: '1rem' }}>
          <h2>忘记密码</h2>
          <h2>忘记密码</h2>
        </div>

        <h4 style={{ marginTop: '0.5rem' }}>欢迎回来!</h4>

        <div className="login_input">
          <div>
            <Input
              placeholder="手机号码"
              size="large"
              value={tell}
              onChange={(event) => {
                settell(Number(event.target.value));
              }}
            />
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Input placeholder="图片验证码" size="large" />
            <div
              onClick={() => {
                get_svg_captcha_data();
              }}
              dangerouslySetInnerHTML={{ __html: captcha }}
              style={{ display: 'inline-block' }}
            />
          </div>
          <div>
            <Tell_yzm name="验证码" tell={tell} getyzmcode={getyzmcode} />
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              fontSize: '0.1rem',
            }}
          >
            <div>人脸识别</div>
            <div
              onClick={() => {
                navgiate('/login');
              }}
            >
              密码登录
            </div>
          </div>
        </div>
        <div>
          <Button
            style={{ fontSize: '0.15rem', width: '100%' }}
            variant="contained"
            color="primary"
            size="small"
          >
            <span className="text">忘记密码</span>
            <span className="shimmer"></span>
          </Button>
        </div>
      </div>
    </div>
  );
}
